{% load custom_filters %}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态授权管理</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
    <style>
        body {
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;
            padding: 20px;
            background: linear-gradient(135deg, #003366 0%, #0099cc 30%, #66ccff 70%, #99ffff 100%);
        }

        .card {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            border-radius: 20px;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
            width: 100%;
            max-width: 1200px;
            padding: 40px;
            margin-bottom: 30px;
        }

        .form-card {
            background: rgba(255, 255, 255, 0.8);
            border-radius: 16px;
            padding: 30px;
            margin-bottom: 30px;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
        }

        .table-container {
            overflow-x: auto;
            width: 100%;
            border-radius: 12px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
        }

        table {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0;
        }

        th,
        td {
            padding: 16px;
            text-align: left;
            border-bottom: 1px solid #e5e7eb;
        }

        th {
            background-color: #f8fafc;
            font-weight: 600;
            color: #1e293b;
        }

        tr:hover {
            background-color: #f8fafc;
        }

        .btn-primary {
            background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
            color: white;
            padding: 12px 24px;
            border-radius: 8px;
            font-weight: 500;
            transition: all 0.3s ease;
        }

        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
        }

        .input-field {
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            padding: 12px;
            width: 100%;
            transition: all 0.3s ease;
        }

        .input-field:focus {
            border-color: #3b82f6;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
        }

        .resale-btn {
            background: linear-gradient(135deg, #10b981 0%, #059669 100%);
            color: white;
            padding: 8px 16px;
            border-radius: 6px;
            font-size: 14px;
            transition: all 0.3s ease;
        }

        .resale-btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(5, 150, 105, 0.2);
        }

        /* 新增的样式，用于提示信息 */
        .message {
            margin-top: 6px;
            padding: 4px 16px;
            border-radius: 4px;
            color: #4caf50;
            background-color: #f0f9e3;
        }
    </style>
</head>

<body>
    <div class="card">
        <h1 class="text-3xl font-bold text-center mb-8 text-gray-800">动态授权管理</h1>

        <div class="form-card">
            <h2 class="text-xl font-semibold mb-6 text-gray-700">创建授权令牌</h2>
            <form method="post" class="space-y-6">
                {% csrf_token %}
                <div class="form-group">
                    <label for="id_original_token" class="block text-sm font-medium text-gray-700 mb-2">原始令牌</label>
                    <input type="text" name="original_token" id="id_original_token" class="input-field"
                           value="{{ form.original_token.value|default_if_none:'' }}" maxlength="255" required>
                </div>
                <div class="form-group">
                    <label for="id_resale_level" class="block text-sm font-medium text-gray-700 mb-2">允许转售级数</label>
                    <input type="number" name="resale_level" id="id_resale_level" class="input-field"
                           value="{{ form.resale_level.value|default_if_none:3 }}" min="1" max="10" required>
                </div>
                <div class="form-group">
                    <label for="id_valid_days" class="block text-sm font-medium text-gray-700 mb-2">有效天数</label>
                    <input type="number" name="valid_days" id="id_valid_days" class="input-field"
                           value="{{ form.valid_days.value|default_if_none:30 }}" min="1" max="365" required>
                </div>
                <button type="submit" class="btn-primary w-full">
                    生成授权令牌
                </button>
            </form>
        </div>

        <div class="form-card">
            <h2 class="text-xl font-semibold mb-6 text-gray-700">验证令牌</h2>
            <form method="post" class="space-y-6">
                {% csrf_token %}
                <input type="hidden" name="verify_token" value="1">
                {% for field in verify_form %}
                <div class="form-group">
                    <label for="{{ field.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                        {{ field.label }}
                    </label>
                    {{ field }}
                    {% if field.errors %}
                    <div class="text-red-500 text-xs italic">{{ field.errors.0 }}</div>
                    {% endif %}
                </div>
                {% endfor %}
                <button type="submit" class="btn-primary w-full">
                    验证令牌
                </button>
            </form>
        </div>

        {% if message %}
        <div class="message">{{ message }}</div>
        {% endif %}

        <div class="table-container">
            <h2 class="text-xl font-semibold mb-6 text-gray-700">我的令牌</h2>
            {% if tokens %}
            <table>
                <thead>
                <tr>
                    <th>新令牌</th>
                    <th>原始令牌</th>
                    <th>当前权限</th>
                    <th>允许转售级数</th>
                    <th>有效天数</th>
                    <th>出售时间</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                {% for token in tokens %}
                <tr>
                    <td onclick="copyToken('{{ token.new_token }}')" style="cursor:pointer" title="点击复制">
                        {{ token.new_token|slice:':20' }}... <span style='color:#007bff;'>(复制)</span></td>
                    <td>{{ token.original_token|slice:':10' }}...</td>
                    <td>{{ token.permission_percentage }}%</td>
                    <td>{{ token.resale_level }}</td>
                    <td>{{ token.valid_days }}</td>
                    <td>{{ token.sale_time|date:"Y-m-d H:i" }}</td>
                    <td>
                        {% if token.resale_level > 0 and token.new_token %}
                        <a href="{% url 'resale_token' token.new_token %}" class="resale-btn">转售此令牌</a>
                        {% else %}
                        <span class="text-gray-500">不可转售</span>
                        {% endif %}
                    </td>
                </tr>
                {% endfor %}
                </tbody>
            </table>
            {% else %}
            <p class="text-gray-500 text-center py-8">当前无有效授权令牌</p>
            {% endif %}
        </div>

        <a href="{% url 'resale_token_list' %}" class="btn-primary inline-block mt-8">
            查看转售记录
        </a>

        <script>
            function copyToken(token) {
                navigator.clipboard.writeText(token)
                    .then(() => {
                        alert('令牌已复制到剪贴板！');
                    })
                    .catch((err) => {
                        console.error('无法复制令牌:', err);
                        alert('复制令牌失败，请重试！');
                    });
            }
        </script>
    </div>
</body>

</html>